<template>
  <div class="home wrap">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 广告 -->
    <van-notice-bar
      left-icon="volume-o"
      text="人脸识别门禁上线啦！智能生活，有我保障！精准、安全、快速、易用 全场景覆盖!!"
    />
    <!-- 标题 与定位栏-->
    <div class="area">
      <h2>智慧社区</h2>
      <!-- 地址选择 -->
      <div class="location" @click="show = true">
        <i class="iconfont icon-dingwei"></i>
        <span>{{ address }}</span>
        <!-- <van-icon name="guide-o" class="jiantou" /> -->
      </div>
      <!-- 弹出层组件 -->
      <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
        <!-- 三级联动地址组件 -->
        <van-area
          @cancel="show = false"
          @confirm="firm"
          title="标题"
          :area-list="areaList"
        />
      </van-popup>
    </div>
    <!-- 分类列表 -->
    <div class="list">
      <!-- 第一行 -->
      <ul>
        <li @click="tomyHouse">
          <i class="iconfont icon-yezhu"></i>
          <p>我的房屋</p>
        </li>
        <li @click="toHeadlines">
          <i class="iconfont icon-gonggao"></i>
          <p>小区头条</p>
        </li>
        <li @click="tovisitorGo">
          <i class="iconfont icon-fangkeshu"></i>
          <p>访客通行</p>
        </li>
        <li @click="toRepair">
          <i class="iconfont icon-peizhitubiaosvg-"></i>
          <p>物业报修</p>
        </li>
      </ul>
      <!-- 第二行 -->
      <ul>
        <li @click="tocomplain">
          <i class="iconfont icon-tousujianyi1"></i>
          <p>投诉建议</p>
        </li>
        <li @click="toexpressage">
          <i class="iconfont icon-express-package"></i>
          <p>我的快递</p>
        </li>
        <li @click="tostaff">
          <i class="iconfont icon-renshiguanli"></i>
          <p>人事部门</p>
        </li>
        <li>
          <i class="iconfont icon-yinjinshoufei"></i>
          <p>收费管理</p>
        </li>
      </ul>
      <!-- 第三行 -->
      <ul>
        <li>
          <!-- <van-button type="primary" text="显示遮罩层" @click="shows = true" /> -->
          <!-- <van-overlay :show="shows" @click="shows = false" /> -->
          <i class="iconfont icon-yijiankaimenmdpi" @click="shows = true"></i>
          <p>一键开门</p>
          <van-overlay :show="shows" @click="shows = false">
            <div class="block">
              <h4>开门功能需开启以下权限</h4>
              <van-button type="info" plain class="set">
                <van-icon name="location-o" class="local" />
                开启定位服务
              </van-button>
              <van-button type="info" plain class="set">
                <van-icon name="location-o" class="local" />
                允许使用位置信息
              </van-button>
              <van-button type="info" plain class="set">
                <i class="iconfont icon-lanya local"></i>
                <!-- <van-icon name="location-o" class="local" /> -->
                开启蓝牙
              </van-button>
              <van-button disabled type="info" class="setopen"
                >一键开门</van-button
              >
            </div>
          </van-overlay>
        </li>
        <li @click="toRed">
          <i class="iconfont icon-hongbao"></i>
          <p>开门红</p>
        </li>
        <li @click="toast">
          <i class="iconfont icon-cheliang-"></i>
          <p>我的车辆</p>
        </li>
        <li @click="toast">
          <i class="iconfont icon-shangchuandianzifapiaoPDF"></i>
          <p>电子发票</p>
        </li>
      </ul>
    </div>
    <!-- 提示 -->
    <div class="tit">
      <i class="iconfont icon-yk_gantanhao"></i>
      暂无更多内容
    </div>
  </div>
</template>
<script>
// 导入省市区数据
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
export default {
  // 定义属性
  name: "Home",
  data() {
    return {
      show: false,
      shows: false,
      images: [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimgphoto.gmw.cn%2Fattachement%2Fjpg%2Fsite2%2F20190710%2Ff44d3075890f1e90124f1f.jpg&refer=http%3A%2F%2Fimgphoto.gmw.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637731349&t=ca53adc86c07e7e7963bba957ffcbaa6",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.foocaa.com%2Fstatic%2Fupload%2Fimage%2F20200214%2F1581665785146252.jpg&refer=http%3A%2F%2Fwww.foocaa.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637731218&t=17752adb22d8fe4d31b9212202f9924f",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.goldweb.cn%2Fkindeditor%2Fattached%2Fimage%2F20190808%2F20190808092344_5887.jpg&refer=http%3A%2F%2Fwww.goldweb.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637731271&t=300426d52329a950b7de28cdb184fe49",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.yihaoshequ.net%2Fuploads%2Fallimg%2F170725%2F1-1FH5144412494.jpg&refer=http%3A%2F%2Fwww.yihaoshequ.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637731418&t=7688bf6a7af0913b70098d7f60717306",
      ],
      finished: false,
      address: "雅馨花苑",
      list: [],
      areaList,
    };
  },
  methods: {
    // 地址确定
    firm(val) {
      console.log(val);
      this.address = val[1].name;
      this.show = false;
    },
    tomyHouse() {
      this.$router.push({ path: "/myHouse" });
    },
    toHeadlines() {
      this.$router.push({ path: "/headlines" });
    },
    toRed() {
      this.$router.push({ path: "/red" });
    },
    toast() {
      Toast({
        message: "该功能正在更新，敬请期待！",
        position: "bottom",
      });
    },
    tovisitorGo() {
      this.$router.push({ path: "/visitorGo" });
    },
    toexpressage() {
      this.$router.push({ path: "/expressage" });
    },
    toRepair() {
      this.$router.push({ path: "/repair" });
    },
    tocomplain() {
      this.$router.push({ path: "/complain" });
    },
    tostaff() {
      this.$router.push({ path: "/staff" });
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.home {
  .van-swipe {
    height: 170px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .area {
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    h2 {
      font-size: 20px;
      font-weight: 500;
      padding: 10px;
    }
    .location {
      font-size: 15px;
      color: #666666;
      span {
        font-size: 18px;
      }
      .jiantou {
        font-size: 8px;
        color: #b0b0b0;
      }
    }
  }
  .list {
    ul {
      padding: 10px 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      li {
        text-align: center;
        i {
          font-size: 35px;
          color: rgb(250, 75, 54);
        }
        p {
          font-size: 14px;
        }

        .block {
          width: 260px;
          height: 320px;
          background-color: #fff;
          border-radius: 10px;
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          h4 {
            padding: 20px 10px;
          }
          .set {
            width: 200px;
            border-radius: 30px;
            margin-bottom: 20px;
            font-size: 16px;
            .local {
              font-size: 20px;
            }
          }
          .setopen {
            border-radius: 30px;
            width: 200px;
            height: 30px;
          }
        }
      }
    }
  }
  .tit {
    padding: 20px;
    text-align: center;
    color: #ccc;
  }
}
</style>
